<template>
  <div class="find-password-box">
    <div class="top">
      <div class="top-item" :class="{active: flag1}">
        <div class="top-item-content">
          验证身份
        </div>
      </div>
      <span>&nbsp;</span>
      <div class="top-item" :class="{active: flag2}">
        <div class="top-item-content">
          设置新密码
        </div>
      </div>
      <span>&nbsp;</span>
       <div class="top-item" :class="{active: flag3}">
        <div class="top-item-content">
          完成
        </div>
      </div>
    </div>
    <div class='content'>
      <verification-1 v-if="verificating1" @next1="next1"  v-model:phoneNumber="phoneNumber"></verification-1>
      <verification-2 v-else-if="verificating2" @next2="next2" v-model:phoneNumber="phoneNumber"></verification-2>
      <change-password v-else-if="changePassword" @confirmChange="confirmChange" v-model:phoneNumber="phoneNumber"></change-password>
      <complete v-else ></complete>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref,Ref } from 'vue';
import Verification1 from '@/components/FindPassword/Verification1.vue';
import Verification2 from '@/components/FindPassword/Verification2.vue';
import ChangePassword from '@/components/FindPassword/ChangePassword.vue';
import Complete from '@/components/FindPassword/Complete.vue';

export default defineComponent({
  components: {
    Verification1,
    Verification2,
    ChangePassword,
    Complete
  },
	setup() {
    //与子组件共享数据
    const phoneNumber = ref('123');
    //状态标志
    let flag1 = ref(true);
    let flag2 = ref(false);
    let flag3 = ref(false);

    let verificating1 = ref(true);
    let verificating2 = ref(false);
    let changePassword = ref(false);
    let complete = ref(false);

    let next1 = () => {
      verificating1.value = false;
      verificating2.value = true;
    };
    let next2 = () => {
      verificating2.value = false;
      changePassword.value = true;
      flag2.value = true;
      console.log('nex2');
    }
    let confirmChange = () => {
      changePassword.value = false;
      complete.value = true;
      flag3.value = true;
    }


    return {
      phoneNumber,
      //顶部栏修改密码的进程标志值
      flag1,
      flag2,
      flag3,
      //修改密码各阶段的标志值
      verificating1,
      verificating2,
      changePassword,
      complete,
      //传给子组件的方法，用于跳转到下一个修改密码的阶段
      next1,
      next2,
      confirmChange
      
    };
  },

});
</script>
<style lang="scss" scoped>
	@import '@/assets/css/config.scss';
  div.find-password-box{
	  width: 800px;
    padding: 50px 45px 50px 45px;
    background: white;
	  border-radius: 10px;
  }
  div.top{
    margin-bottom: 50px;
    border-style: solid;
    border-width: 0 0 2px 0;
    border-color: $themeLightGray;
    padding-bottom: 5px;
    text-align: right;
  }
  .top-item.active{
    background: $themeColor;
  }
  div.top-item{
    height: 40px;
    width: 110px;
    text-align: center;
    background: $themeGray;
    transform: skewX(-30deg);
    vertical-align: middle;
    display: inline-block;
  }
  div.top-item-content{
    font-size: 16px;
    color: white;
    padding-top: 10px;
    transform: skewX(30deg);
  }
   :deep(.el-input__inner){
    letter-spacing: 1px;
  }
</style>

